<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>房屋详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			html,body{
				min-height: 100%;
				background: #fff;
			}
			.mui-bar-nav{
				background: none;
				box-shadow: none;
			}
			.mui-slider{
				position: relative;
			}
			.mui-slider .icon{
				position: absolute;
				top: 10px;
				right: 10px;
			}
			.mui-slider  .mui-slider-item img{
				height: 11.73913rem;
			}
			.mui-content{
				padding: 0!important;
			}
			.mui-row li{
				list-style: none;
			}
			.mui-row li span{
				margin-right: 5px;
			}
			.mui-table-view #one .mui-table-view-cell{
				float: left !important;
			}
			.footer{
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				text-align: center;
			}
			.footer div:nth-child(2) li{
				background: #fec93c;
			}
		</style>
	</head>
		
	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui-row">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>		    
			</div>
		</header>
		
		<div class="mui-content">
			<div id="slider" class="mui-slider" >
		      <div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/a1.jpg">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/a1.jpg">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/a1.jpg">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/a1.jpg">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/a1.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/a1.jpg">
						</a>
					</div>
				</div>
		        <div class="icon">
					<a href=""><img src="../../images/message@3x.png" width="26"></a>
					<a href=""><img src="../../images/message@3x.png" width="26"></a>
					<a href=""><img src="../../images/message@3x.png" width="26"></a>
				</div>
		    </div>
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                   <p>地铁1号线 高新园站 温馨小区</p>
		                    <p class="mui-ellipsis">惊爆价<span>¥1200元/月</span></p>
		                </div>
		            </a>
		        </li>
		    </ul>
		    
		    <div class="mui-row">
		        <div class="mui-col-sm-2">
		            <li class="mui-table-view-cell">
		               <span>43m<sup>2</sup></span>|
		            </li>
		        </div>
		        <div class="mui-col-sm-3">
		            <li class="mui-table-view-cell">
		                <span> 一房一厅</span>|   
		            </li>
		        </div>
		         <div class="mui-col-sm-3">
		            <li class="mui-table-view-cell">
		                <span>朝南</span>|
		            </li>
		        </div>   
		        <div class="mui-col-sm-3">
		            <li class="mui-table-view-cell">
		            <span>押二付一</span>|
		            </li>
		        </div>
		    </div>
		    <ul class="mui-table-view" id="one">
			    <li class="mui-table-view-cell">
			    	<h4 class="title">周边环境</h4>
			    	<span>离地铁近</span>
			    	<span>菜市场300米</span>
			    	<span>菜市场300米</span>
			    	<span>菜市场300米</span>
			    </li>
			</ul>
		    <ul class="mui-table-view" id="two">
			    <li class="mui-table-view-cell"><h4 class="title">房屋设备</h4></li>
			    <li class="mui-table-view-cell"><span>卧室:</span>床，床头柜，衣柜，落地窗帘</li>
			    <li class="mui-table-view-cell"><span>阳台:</span>绿植，晾衣架</li>
			    <li class="mui-table-view-cell"><span>厨房:</span>天燃气</li>
			    <li class="mui-table-view-cell"><span>卫生间:</span>热水器</li>
			</ul>
		    
		    <ul class="mui-table-view">
		    	<li class="mui-table-view-cell">
		    	 	<span style="vertical-align: middle;">入住服务</span>
			        <span class="mui-badge mui-badge-primary">更多服务></span>
			    </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">务入住服务入住服务入住服务</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">入住服住服务入住服务入住服务入住服务</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		        
		    </ul>
		    
		    <ul class="mui-table-view">
			    <li class="mui-table-view-cell">
			    	<h4 class="title">房源介绍</h4>
			    	<p>
			    		法师打发发生的发生
			    		法师打发发生的发生
			    		法师打发发生的发生
			    		法师打发发生的发生
			    		法师打发发生的发生
			    		<span>【更多】</span>
			    	</p>
			    </li>
			</ul>
		    
		    <div class="mui-table-view" id="title3">			     
		        <li class="mui-table-view-cell">
			        <a class="mui-navigate-right">置家必备好货</a>
			    </li>
		    </div>
		    
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell">
		    	 	<span style="vertical-align: middle;">最新评论</span>
			        <span class="mui-badge mui-badge-primary">更多服务></span>
			    </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    幸福
		                    <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    木屋
		                    <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		                <div class="mui-media-body">
		                    CBD
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		    </ul>
		    <div class="mui-row footer" >
		        <div class="mui-col-sm-6 mui-col-xs-6">
		            <li class="mui-table-view-cell">
		                <a>
		                              预约看房    
		                </a>
		            </li>
		        </div>
		        <div class="mui-col-sm-6 mui-col-xs-6">
		            <li class="mui-table-view-cell">
		                <a>
		                              预交押金
		                </a>
		            </li>
		        </div>
		    </div>
		    	    
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/resp.js"></script>
		
	</body>

</html> 